<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		
		<navBar title="发表评价" />
		
		<view class="c-content">
			<!-- 门店信息 -->
			<view class="cc-storeInfo">
				<image :src="storeInfo.storeImage" mode=""></image>
				<view class="ccs-name">{{ storeInfo.storeName }}</view>
			</view>
			
			<!-- 评分 -->
			<view class="cc-rate">
				<view class="ccr-item" v-for="(item, index) in rateList" :key="item.name">
					<view class="ccri-label"> {{ item.name }}: </view>
					<uni-rate
						class="ccri-rate"
						:touchable="false"
						:value="item.value"
						@change="(e) => onChange(e, index)"
						activeColor="#CF1A1B"
						margin="4"
					/>
					<view class="ccri-title">
						{{ getRateTitle(item.value) }}
					</view>
				</view>
				
			</view>
		
			<!-- 详细描述 -->
			<view class="cc-desc">
				<view class="ccd-title">
					<text class="ccdt-tag"> * </text>
					<text class="ccdt-name">详细描述</text>
				</view>
				<view class="ccd-textarea">
					<u--textarea
						v-model="content"
						border="none"
						count
						autoHeight
						:maxlength="500"
						:placeholderStyle="{ color: 'rgba(0, 0, 0, 0.45)'}"
						placeholder="将你在这家门店的感受分享出来，帮助更多卡友！"
						@input="handleInput"
					/>
				</view>
			</view>
			
			<!-- 上传图片 -->
			<view class="cc-file">
				<view class="ccf-title">
					上传凭证
					<text class="ccft-desc">(最多可上传9个)</text>
				</view>
				
				<view class="cr-img-list">
					<view class="cr-img" v-for="item in attachList" :key="item.attachUrl">
						<video v-if="videoTypeList.includes(getFileType(item.attachUrl))" :src="item.attachUrl" @error="videoErrorCallback" >
							<view class="media-delte" @click.stop="delateImg(item.attachUrl)"> 
								<uni-icons type="closeempty" size="14" color="rgb(255, 255, 255)"></uni-icons>
							</view>
						</video>
						<image v-else :src="item.attachUrl" mode="scaleToFill" @click.stop="handlePreviewImage(item.attachUrl, attachList)">
							<view class="media-delte" @click.stop="delateImg(item.attachUrl)">
								<uni-icons type="closeempty" size="14" color="rgb(255, 255, 255)" ></uni-icons>
							</view>
						</image>
					</view>
					<!-- 上传 -->
						<uploadMedia
							v-if="attachList.length < 9"
							class="uploadMedia"
							@handleFileInfo="handleFileInfo"
							:videoSize="200"
							style="width: 32%;"
						/>
				</view>
			</view>
			
		</view>
		
		
		<view class="c-action">
			<button type="warn" @click.stop="handleSubmit" :loading="btnLoading">提交</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import uploadMedia from '@/components/uploadMedia.vue'
	export default {
		components: {
			navBar,
			uploadMedia
		},
		onLoad(query){
			const { id, storeName, storeImage, source = '' } = query
			this.source = source
			this.orderId = id
			this.storeInfo.storeName = storeName
			this.storeInfo.storeImage = storeImage
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
		},
		data() {
			return {
				source: null, // 用于判断是从 '全部订单-已完成'入口，还是'待评价'入口
				orderId: null,	// 订单id
				storeInfo: {},	// 门店信息
				paddingTop: '',
				btnLoading: false,
				rateList: [
					{
						name: '服务态度',
						value: 5,
					},
					{
						name: '技术水平',
						value: 5,
					},
					{
						name: '配件质量',
						value: 5,
					},
					{
						name: '价格合理',
						value: 5,
					}
				],
				content: '',	// 详细描述
				videoTypeList: ['mp4'],	// 用户可上传得视频文件类型
				attachList: [], // 附件数组
			};
		},
		computed: {
			getRateTitle(){
				return (value) => {
					switch(value){
						case 1:
							return '非常不满意'
						case 2:
							return '不满意'
						case 3:
							return '一般'
						case 4:
							return '满意'
						case 5:
							return '非常满意'
						default: 
							return '非常满意'
					}
				}
			},
			// 判断用户评价内容是图片还是视频
			getFileType(){
				return (fileUrl) => {
					return fileUrl && fileUrl.length && fileUrl.substring(fileUrl.lastIndexOf(".") + 1).toLowerCase()
				}
			},
		},
		methods: {
			handleInput(e){
				if(e.length > 500){
					this.content = this.content.substring(0, 500)
				}
			},
			delateImg(url) {
				this.attachList = this.attachList.filter(i => i.attachUrl !== url)
			},
			handleFileInfo(data){
				if(this.attachList.length < 9){
					this.attachList.push({attachName: data.name, attachUrl:data.url})
				}
			},
			onChange(e, index) {
				this.rateList[index].value = e.value
			},
			async handleSubmit(){
				if(!this.content){
					uni.showToast({
						icon: 'none',
						title: '详细描述不能为空'
					})
					return false
				}
				if(this.btnLoading === true){
					return false
				}
				try {
					this.btnLoading = true
					
					const data = {
						orderId	: this.orderId,
						saScore: this.rateList[0].value,
						tlScore: this.rateList[1].value,
						cqScore: this.rateList[2].value,
						rpScore: this.rateList[3].value,
						content: this.content,
						attachList: this.attachList,
					}
					const res = await this.$request({
						method: 'POST',
						url: '/user-center/terminalEvaluation/publish',
						data
					})
					
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						// 从 全部订单-已完成 进来
						if(this.source && this.source === 'orderList'){
							uni.navigateBack()
						}else {
							// 待评价 列表 进来
							uni.redirectTo({
							  url: `/orderPack/evaluate/index`
							})
						}

					}, 1500)
					
					this.btnLoading = false
					
				} catch (res) {
					uni.showToast({
						title: res.respMsg,
						icon: 'error'
					})
					this.btnLoading = false
					

				}
			},
			// 图片预览
			handlePreviewImage(url, list){
				const urls = []
				list.forEach(i => {
					urls.push(i.attachUrl)
				})
				uni.previewImage({
					current: list.indexOf(url),
					urls
				})
			},
			// 视频播放出错时触发	
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding-bottom: 190rpx;
	width: 100%;
	overflow-y: hidden;
	
	.c-content {
		overflow-y: hidden;
		margin: 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 46rpx 0 72rpx 38rpx;
		
		// 门店信息
		.cc-storeInfo {
			display: flex;
			align-items: center;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 6rpx;
			}
			.ccs-name {
				margin-left: 28rpx;
				color: rgba(0, 0, 0, 0.85);
				font-size: 16px;
				text-shadow: 0 0 0.1px currentColor;
			}
		}
		
		// 评分
		.cc-rate {
			padding-left: 22rpx;
			box-sizing: border-box;
			.ccr-item {
				display: flex;
				align-items: center;
				margin-top: 36rpx;
				.ccri-label {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.85);
					margin-right: 34rpx;
					// text-shadow: 0 0 0.1px currentColor;
				}
				.ccri-title {
					margin-left: 34rpx;
				}
			}
		}
		
		// 详细描述
		.cc-desc {
			.ccd-title {
				display: flex;
				align-items: center;
				font-size: 14px;
				margin: 78rpx 0 32rpx;
				.ccdt-tag {
					color: #ff0000;
					margin-right: 10rpx;
				}
				.ccdt-name {
					color: rgba(0, 0, 0, 0.85);
					text-shadow: 0 0 0.1px currentColor;
				}
			}
			.ccd-textarea {
				margin: 32rpx 32rpx 0 0;
				box-sizing: border-box;
				// overflow-y: auto;
				// padding: 30rpx 24rpx;
				border-radius: 6rpx;
				/deep/ .u-textarea {
					background-color: rgba(245, 245, 246, 1);
					// border: none;
					min-height: 240rpx !important;
					padding: 12rpx 12rpx 48rpx !important;
					textarea {
						// height: auto !important;
					}
				}
				/deep/ .u-textarea__count {
					background-color: rgba(245, 245, 246, 1) !important;
					left: 5px !important;
					right: 0 !important;
				}
			}
		}
	
		// 上传凭证
		.cc-file {
			.ccf-title {
				color: rgba(0, 0, 0, 0.85);
				text-shadow: 0 0 0.1px currentColor;
				margin: 78rpx 0 26rpx;
				.ccft-desc {
					margin-left: 20rpx;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.45);
				}
			}
			
			.cr-img-list {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
				.cr-img {
					position: relative;
					width: 32%;
					margin: 0 8rpx 8rpx 0;
					image,
					video {
						width: 100%;
						height: 176rpx;
					}
					.media-delte {					
						position: absolute;
						top: 0;
						right: 0;
						background-color: #373737;
						height: 20px;
						width: 20px;
						display: flex;
						flex-direction: row;
						border-bottom-left-radius: 100px;
						align-items: center;
						justify-content: center;
						z-index: 3;
						/deep/ .uni-icons {
							line-height: 14px;
							position: absolute;
							right: 2rpx;
							top: 2rpx;
						}
					}
				}
				
			}
		}
	
	
	
	}
	

	
	.c-action {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 178rpx;
		width: 100%;
		z-index: 9;
		background-color: #ffffff;
		padding: 30rpx 32rpx 68rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -10rpx 20rpx 1rpx rgba(0,0,0,0.1);
		button {
		}
	}
}
</style>
